<template>
  <div>
    <el-card class="box-1">
      <div slot="header"><span>{{ title }}</span></div>
      <el-form ref="form" :model="form" :rules="formRules" label-width="160px">
        <el-form-item label="用户名称" prop="name">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio label="男"/>
            <el-radio label="女"/>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="form.mobile" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="企业微信账号">
          <el-input v-model="form.wechat_id" placeholder="创建企业微信时请使用公司邮箱作为账号"/>
        </el-form-item>
        <el-form-item label="部门" prop="company_id">
          <el-select v-model="form.company_id" placeholder="请选择所属部门" clearable>
            <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="团队" prop="team_array">
          <el-select v-model="form.team_array" placeholder="请选择所属团队" clearable multiple class="teamSelect">
            <el-option v-for="item in teamList" :key="item.id" :label="item.branch_name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-input v-model="form.position" />
        </el-form-item>
        <el-form-item label="入职时间" prop="hiredate">
          <el-date-picker v-model="form.hiredate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="转正时间">
          <el-date-picker v-model="form.formal_time" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password"/>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model="form.checkPass"/>
        </el-form-item>
        <el-form-item label="是否显示业绩">
          <el-radio-group v-model="form.ach_status">
            <el-radio :label="0">显示</el-radio>
            <el-radio :label="1">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="0">启用</el-radio>
            <el-radio :label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="title!=='编辑用户'" label="是否创建企业微信">
          <el-radio-group v-model="form.set_qy_wechat">
            <el-radio :label="1">创建</el-radio>
            <el-radio :label="0">不创建</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="管理权限">
          <el-checkbox-group v-model="form.powerArray">
            <el-checkbox v-for="item in teamList" :key="item.id" :label="item.id">{{ item.branch_name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="角色列表">
          <el-radio-group v-model="form.role_id">
            <el-radio v-for="item in roleList" :key="item.id" :label="item.id">{{ item.name }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <div style="text-align:center">
          <el-button type="primary" @click="submitForm('form')">{{ title==='编辑用户'?'保存':'立即创建' }}</el-button>
          <el-button type="primary" @click="$router.back(-1)">取消</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    const validatePass = (rule, value, callback) => {
      if (this.form.set_qy_wechat === 1) {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.form.checkPass !== '') {
            this.$refs.form.validateField('checkPass')
          }
          callback()
        }
      }
      callback()
    }
    const validatePass2 = (rule, value, callback) => {
      if (this.form.set_qy_wechat === 1) {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      callback()
    }
    return {
      title: '',

      teamList: [], // 团队列表
      companyList: [], // 公司列表
      roleList: [], // 角色列表

      form: {
        name: '',
        sex: '男',
        mobile: '',
        email: '',
        wechat_id: '',
        company_id: '',
        branch: '',
        team_array: [],
        position: '',
        role_id: '',
        hiredate: '',
        formal_time: '',
        password: '',
        checkPass: '',
        ach_status: 1,
        status: 0,
        set_qy_wechat: 0,
        // source: '',
        // project: '',
        power: '',
        powerArray: []
      },
      formRules: {
        name: [{ required: true, message: '请输入用户名', trigger: 'change' }],
        mobile: [{ required: true, message: '请填写手机号码', trigger: 'change' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'change' }],
        wechat_id: [{ required: true, message: '请输入企业邮箱账号', trigger: 'change' }],
        company_id: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
        role_id: [{ required: true, message: '请选择所属角色', trigger: 'change' }],
        position: [{ required: true, message: '请输入职位', trigger: 'change' }],
        hiredate: [{ required: true, message: '请选择入职时间', trigger: 'change' }],
        password: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }]
      }
    }
  },
  watch: {},
  created() {
    this.title = this.$route.query.title
    this.form.hiredate = new Date()
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      this.getUserInfo(this.$route.query.id)
    }
    this.getTeamList()
    this.getCompanyList()
    this.getRoleList()
  },
  methods: {
    /**
     *  获取用户信息
     *  接口:'user/detail/{id}'
     */
    getUserInfo(id) {
      const url = 'user/detail/' + id
      this.$store.dispatch('GetConnect', { url }).then(res => {
        const info = {
          name: res.data.name,
          sex: res.data.sex,
          mobile: res.data.mobile,
          email: res.data.email,
          wechat_id: res.data.wechat_id,
          company_id: res.data.company_id,
          team_array: res.data.user_branch,
          position: res.data.position,
          hiredate: res.data.hiredate,
          formal_time: res.data.formal_time,
          ach_status: res.data.ach_status,
          set_qy_wechat: res.data.set_qy_wechat,
          powerArray: res.data.power,
          role_id: res.data.role_id || this.roleList[0].id,
          status: res.data.status
        }
        this.form = info
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },
    /**
     *  获取团队列表
     *  接口:'branch/all-list'
     */
    getTeamList() {
      const url = 'branch/all-list'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.teamList = res.data
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    /**
     *  获取公司列表
     *  接口:'company/all-list'
     */
    getCompanyList() {
      const url = 'company/all-list'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.companyList = res.data
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    /**
     *  获取角色列表
     *  接口:'role/all-list'
     */
    getRoleList() {
      const url = 'role/all-list'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.roleList = res.data
        if (!this.id && res.data.length > 0) {
          this.form.role_id = res.data[0].id
        }
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = this.form
          data.power = data.powerArray.join(',')
          data.branch = data.team_array.join(',')
          const url = this.id ? 'user/edit/' + this.id : 'user/create'
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg)
            this.$router.back(-1)
          }).catch((err) => {
            this.$message.error(err.msg)
          })
        } else {
          this.$message.error('提交失败,请检查必填项')
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../styles/index.scss';
.box-1 {
  max-width: 1000px;
  margin: 0 auto;
  > div span {
    font-size: 18px;
    font-weight: 600;
    padding: 0 10px;
  }
  .el-form {
    max-width: 900px;
    .title {
      font-weight: 600;
    }
    .remark {
      font-size: 13px;
      color: $textGray;
    }
    .el-button {
      @extend .bg-green;
      width: 20%;
      min-width: 160px;
    }
    .teamSelect{
      width: 100%;
    }
  }
}
.el-checkbox {
  margin-right: 30px;
}
.el-checkbox + .el-checkbox {
  margin-left: 0;
  margin-right: 30px;
}
.el-radio+.el-radio{
  margin-left: 0;
}
.el-radio{
  line-height: 40px;
  margin-right: 30px;
}
</style>
